<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0 Access-Control-Allow-Origin:*">
      <!-- 引入 Bootstrap -->
      <link href="<?=  base_url("html/sample in bootstrap v3/bootstrap/css/bootstrap.min.css")?>" rel="stylesheet" media="screen">
      <link href="<?=  base_url("html/css/bootstrap-datetimepicker.min.css")?>" rel="stylesheet" media="screen">
      
	<title>Welcome to CodeIgniter</title>

	<style type="text/css">

	::selection{ background-color: #E13300; color: white; }
	::moz-selection{ background-color: #E13300; color: white; }
	::webkit-selection{ background-color: #E13300; color: white; }

	body {
		background-color: #fff;
		margin: 40px;
		font: 13px/20px normal Helvetica, Arial, sans-serif;
		color: #4F5155;
	}

	a {
		color: #003399;
		background-color: transparent;
		font-weight: normal;
	}

	h1 {
		color: #444;
		background-color: transparent;
		border-bottom: 1px solid #D0D0D0;
		font-size: 19px;
		font-weight: normal;
		margin: 0 0 14px 0;
		padding: 14px 15px 10px 15px;
	}

	code {
		font-family: Consolas, Monaco, Courier New, Courier, monospace;
		font-size: 12px;
		background-color: #f9f9f9;
		border: 1px solid #D0D0D0;
		color: #002166;
		display: block;
		margin: 14px 0 14px 0;
		padding: 12px 10px 12px 10px;
	}

	#body{
		margin: 0 15px 0 15px;
	}
	
	p.footer{
		text-align: right;
		font-size: 11px;
		border-top: 1px solid #D0D0D0;
		line-height: 32px;
		padding: 0 10px 0 10px;
		margin: 20px 0 0 0;
	}
	
	#container{
		margin: 10px;
		border: 1px solid #D0D0D0;
		-webkit-box-shadow: 0 0 8px #D0D0D0;
	}
	</style>

</head>
<body>

<div id="container">
    <h1>请输入参数</h1>
        <div class="form-group">
                <label for="dtp_input1" class="col-md-2 control-label">时间/月度</label>
                <div class="input-group date form_datetime col-md-5" data-date="" data-date-format="yyyy/MM" data-link-field="dtp_input1">
                    <input id="date" class="form-control" size="16" type="text" value="" readonly>
                    <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
					<span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
                </div>
				<input type="hidden" id="dtp_input1" value="" /><br/>
        </div>
    
	<table class="table">
                <thead>
                    <tr>
                        <th>id</th>
                        <th>name</th>
                        <th>charge</th>
                        <th>电</th>
                        <th>水</th>
                        <th>空调</th>
                    </tr>
                </thead>
                <?php foreach($homeArr as $value):?>
                    <tbody>
                        <tr>
                            <td><?=$value['id']?><input type="text" id="id<?=$value['id']?>" style="display: none;"></td>
                            <td><?=$value['homename']?><input type="text" id="homename<?=$value['id']?>" style="display: none;"></td>
                            <td><?=$value['charge']?><input type="text" id="charge<?=$value['id']?>" style="display: none;"></td>
                            <td><input type="number" id="dian<?=$value['id']?>" onblur="updatedian(<?=$value['id']?>)"></td>
                            <td><input type="number" id="shui<?=$value['id']?>" value="0" onblur="updateshui(<?=$value['id']?>)"></td>
                            <td><input type="number" id="kongtiao<?=$value['id']?>" value="0" onblur="updatekongtiao(<?=$value['id']?>)"></td>
                        </tr>
                    </tbody>
                
                <?php endforeach;?>
                
        </table>
    
        <button type="button" class="btn btn-primary btn-block submit">
                    报表统计
        </button>
        
</div>
    <script type="text/javascript" src="<?=  base_url("html/jquery/jquery-1.8.3.min.js")?>" charset="UTF-8"></script>
    <script type="text/javascript" src="<?=  base_url("html/sample in bootstrap v3/bootstrap/js/bootstrap.min.js")?>"></script>
    <script type="text/javascript" src="<?=  base_url("html/js/bootstrap-datetimepicker.js")?>" charset="UTF-8"></script>
    <script type="text/javascript" src="<?=  base_url("html/js/locales/bootstrap-datetimepicker.zh-CN.js")?>" charset="UTF-8"></script>
   <script type="text/javascript">
       $(document).ready(function(){
           $(".submit").click(function(){
               window.location.href = "<?=  base_url("report")?>"
           })
       })
       function updatedian(id){
           var datetime = $("#date").val();
           if(datetime.length == 0){
               $("#dian"+id).val("");
               alert("请先选择当前信息所属年月！");
               return false;
           }
           var dian = $("#dian"+id).val();
           if(dian.length>0){
                $.ajax({
                    type:"POST",
                    data:{id:id,dian:dian,datetime:datetime},
                    url:"<?=  base_url("create/dian")?>",
                    dataType:"json",
                    success:function(data){
                            //alert(data.res);
                    }
                })
           }
       }
       function updateshui(id){
            var datetime = $("#date").val();
            if(datetime.length == 0){
                $("#shui"+id).val("");
               alert("请先选择当前信息所属年月！");
               return false;
            }
            var shui = $("#shui"+id).val();
            
            $.ajax({
                type:"POST",
                data:{id:id,shui:shui,datetime:datetime},
                url:"<?=  base_url("create/shui")?>",
                dataType:"json",
                success:function(data){
                        //alert(data.res);
                }
            })
       }
       function updatekongtiao(id){
            var datetime = $("#date").val();
            if(datetime.length == 0){
                $("#kongtiao"+id).val("");
               alert("请先选择当前信息所属年月！");
               return false;
            }
            var kongtiao = $("#kongtiao"+id).val();
            
            $.ajax({
                type:"POST",
                data:{id:id,kongtiao:kongtiao,datetime:datetime},
                url:"<?=  base_url("create/kongtiao")?>",
                dataType:"json",
                success:function(data){
                        //alert(data.res);
                }
            })
       }
   </script>
<script type="text/javascript">
    $('.form_datetime').datetimepicker({
        minView:"month",
        format:'yyyy-mm',
        language: 'zh-CN',
        weekStart: 1,
        todayBtn: 1,
        autoclose: 1,
        todayHighlight: 1,
        startView: 2,
        forceParse: 0,
        showMeridian: 1
    });
</script>
</body>
</html>